<template>
  <div class="mi-detail w">
    <div class="product-box">
      <div class="img-left">
        <div class="block text-center" style="height: 556px;width: 560px;">
          <el-carousel height="auto" autoplay>
            <el-carousel-item v-for="goodsbanner in listdata.GoodsBanners" :key="goodsbanner"
              style="height: 556px;width: 560px;">
              <img :src=goodsbanner.url alt="" style="width: 100%;">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="product-con">
        <div class="p-con-h2">{{ listdata.title }}</div>
        <p class="sale-desc">{{ listdata.desc }}</p>
        <div style="margin: 20px 0;">
          <span class="price-info">{{ Number(listdata.min_price) }}元</span><del class="del-info">{{
            Number(listdata.min_oprice)
          }}元</del>
        </div>
        <div class="buy-option">
          <div v-for="key in skusMap.keys()" :key="key" class="buy-box-child">
            <div class="option-box">
              <div class="title">{{ key }}</div>
              <ul class="clearfix">
                <li class="fix-li" :title=value v-for="value in skusMap.get(key)" :key="value"
                  @click="SelectSpecifications(key, value)"
                  :style="{ 'border': xuan.get(key) === value ? '1px solid #ff6700' : '1px solid #e0e0e0', 'color': xuan.get(key) === value ? '#ff6700' : '#000' }">
                  {{ value }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="selected">
          <div class="sel-list">
            <span class="nametext">{{ listdata.title }}</span>
          </div>
          <div style="font-size: 20px; color: #ff6700;margin-left: 30px;">总计: {{ getPrice(xuan.values()) }}元</div>
        </div>
        <div class="btn-box">
          <div class="sale-btn">
            <button class="btn-box-a" @click="joinCart">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <commentVue :id="this.$route.query.good_id" />
</template>
<script>
import commentVue from './components/comments.vue'
import { addCart, detaail } from '@/api/goods'

export default {
  data () {
    return {
      skusMap: new Map(), // 规格
      map: new Map(), // 价格地图
      xuan: new Map(), // 当前选中
      listdata: [], // 所有详情数据
      goodsbanners: [], // 轮播图
      SkusLists: [], // 规格
      result: []
    }
  },
  methods: {
    // 选择规格
    SelectSpecifications (key, value) {
      this.xuan.set(key, value)
    },
    // 添加到购物车
    async joinCart () {
      try {
        const result = await addCart({
          goods_id: this.$route.query.good_id,
          goods_skus_id: this.getSkusId(this.xuan.values()),
          num: 1
        })
        this.result = result
      } catch (error) {
      }
    },
    // 请求详情数据
    async detadt () {
      try {
        const dedata = await detaail(this.$route.query.good_id)
        this.listdata = dedata.data.data
        // 取出响应数据中的 GoodsSkus 列表
        const goodsSkusList = this.listdata.GoodsSkus
        // 遍历 GoodsSkus 处理skus
        goodsSkusList.forEach((item, index) => {
          const skus = JSON.parse(item.skus)
          // 插入对应规格
          this.listdata.GoodsSkus[index].skus = skus
        })
        this.updateMap(this.listdata.GoodsSkus)
      } catch (error) {
        return console.log(error)
      }
    },
    /**
             * 更新规格地图与价格地图
             * @param {请求的json数据} data
             */
    updateMap (data) {
      data.forEach((value, index) => {
        const key = []
        value.skus.forEach(e => {
          let skus = this.skusMap.get(e.name)
          if (skus == null) {
            skus = new Set()
          }
          skus.add(e.value)
          // 更新规格地图
          this.skusMap.set(e.name, skus)
          key.push(e.value)

          // 初始化选中
          if (this.xuan.get(e.name) == null) {
            this.xuan.set(e.name, e.value)
          }
        })
        // 更新价格地图
        this.map.set(String(key), { pprice: Number(value.pprice), skusId: Number(value.id) })
      })
    },
    // 查询价格
    getPrice (key) {
      let result = key.next()
      const k = []
      while (!result.done) {
        k.push(result.value)
        result = key.next()
      }
      try {
        return this.map.get(String(k)).pprice
      } catch (error) {
      }
    },
    // 获取规格ID
    getSkusId (key) {
      let result = key.next()
      const k = []
      while (!result.done) {
        k.push(result.value)
        result = key.next()
      }
      try {
        return this.map.get(String(k)).skusId
      } catch (error) {
        return console.log(error)
      }
    }
  },
  created () {
    this.detadt()
  },
  components: {
    commentVue
  }
}
</script>
<style scoped>
.product-box {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
}

.product-box .product-con {
  width: 640px;
  margin-left: 20px;
  height: 100%;
}

.product-box .product-con .p-con-h2 {
  font-size: 24px;
  font-weight: 400;
  color: #212121;
}

.product-box .product-con .price-info {
  color: #ff6700;
  font-size: 18px;
}

.product-box .product-con .del-info {
  color: #b0b0b0;
  font-size: 14px;
  margin-left: 5px;
}

/* 轮播图 */
.img-left {
  flex: 1;
  height: 100%;
  margin: 0;
}

.el-carousel {
  height: 556px;
  width: 560px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 配置选择 */
.title {
  font-size: 18px;
  margin-top: 20px;
}

.buy-option {
  margin-bottom: 30px;
}

.buy-option .buy-box-child .option-box {
  height: 135px;
}

.buy-option .buy-box-child .option-box .clearfix {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.buy-option .buy-box-child .option-box .clearfix .fix-li {
  font-size: 16px;
  height: 42px;
  width: 292px;
  text-align: center;
  line-height: 42px;
  border: 1px solid #e0e0e0;
  margin-top: 10px;
  cursor: pointer;
}

.btn-box {
  margin-top: 10px 0 20px 0;
  display: flex;
}

.btn-box .sale-btn {
  margin-top: 10px;
  width: 300px;
  background-color: #ff6700;
  justify-content: center;
  display: flex;
  margin-right: 10px;
}

.btn-box .sale-btn:hover {
  background-color: #f25807;
}

.btn-box-a {
  color: #fff;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
  background: rgba(0, 0, 0, 0);
  border: none;
  width: 100%;
}

.selected {
  min-height: 146px;
  width: 100%;
  margin-bottom: 30px;
  background-color: #f9f9fa;
}

.selected .sel-list {
  padding: 30px;
  display: flex;
}

.selected .sel-list .nametext {
  font-size: 24px;
  font-weight: 400;
  color: #b0b0b0;
}

.selected .sel-list ul {
  height: 21px;
  display: flex;
  justify-content: space-between;
}

.selected .sel-list ul li {
  line-height: 21px;
  height: 28px;
  color: #b0b0b0;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 18px;
}
</style>
<style>
.img-left {
  width: 606px;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

.el-carousel {
  height: 556px;
  width: 560px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
